<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<canvas id="myCanvas" width="1300" height="700"> </canvas>

		<script type="text/javascript">
			var canvas = document.getElementById("myCanvas");
			var ctx = canvas.getContext("2d");

			//						ctx.beginPath();
			//						ctx.fillStyle = "rgba(100,150,185,0.4)"
			//						ctx.fillRect(0, 0, 2200, 700);
			//						ctx.fill();

			var arr = [
				[
					[0, 0, 1, 1, 1, 0, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 1, 1, 0],
					[0, 0, 1, 1, 1, 0, 0]
				], //0
				[
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[1, 1, 1, 1, 1, 1, 1]
				], //1
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 1, 1, 1, 1, 1]
				], //2
				[
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 0, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //3
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 0],
					[0, 0, 1, 1, 1, 1, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 1, 1, 0],
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 1]
				], //4
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 1, 1, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //5
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //6
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0]
				], //7
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //8
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 0, 0, 0, 0]
				], //9
				[
					[0, 0, 0, 0, 0],
					[0, 1, 1, 1, 0],
					[0, 1, 1, 1, 0],
					[0, 1, 1, 1, 0],
					[0, 0, 0, 0, 0],
					[0, 0, 0, 0, 0],
					[0, 1, 1, 1, 0],
					[0, 1, 1, 1, 0],
					[0, 1, 1, 1, 0],
					[0, 0, 0, 0, 0],
				] //冒号
			];
			var qiu = new Array() //x,y,vx,vy,r,color
            var lx=100;
            var ly=150;
			var r = 10; //banjing
			var wenben = [0, 0, 10, 0, 0, 10, 0, 0];
			var img = new Image();

			img.src ="img/6款金属拉丝和网孔背景图片4_lanrentuku.com.jpg";
			var day = new Date;
			img.onload = function() {
				setInterval(function() {

					ctx.clearRect(0, 0, 1300, 700);
					ctx.drawImage(img, 0, 0);
					var day2 = new Date;

					wenben[1] = day.getHours() % 10;
					wenben[0] = parseInt(day.getHours() / 10);
					wenben[4] = day.getMinutes() % 10;
					wenben[3] = parseInt(day.getMinutes() / 10);
					wenben[7] = day.getSeconds() % 10;
					wenben[6] = parseInt(day.getSeconds() / 10);
					if(day.getSeconds() != day2.getSeconds()) {
						if(day.getSeconds() % 10 != day2.getSeconds() % 10) {

							addball(970, r, wenben[7]);
							var sw = parseInt(day.getSeconds() / 10);
							var sw1 = parseInt(day2.getSeconds() / 10);
							if(sw != sw1) {

								addball(810, r, wenben[6]);
							}
							//						day = day2;
						}
						if(day.getMinutes() % 10 != day2.getMinutes() % 10) {

							addball(570, r, wenben[4]);
							var msw = parseInt(day.getMinutes() / 10);
							var msw1 = parseInt(day2.getMinutes() / 10);
							if(msw != msw1) {

								addball(410, r, wenben[3]);
							}

						}
						if(day.getHours() % 10 != day2.getHours() % 10) {

							addball(170, r, wenben[1]);
							var hsw = parseInt(day.getHours() / 10);
							var hsw1 = parseInt(day2.getHours() / 10);
							if(hsw != hsw1) {

								addball(10, r, wenben[0]);
							}

						}
						day = day2;
					}

					for(var k = 0; k < wenben.length; k++) {
						if(k == 0 || k == 1) {
							numbers(wenben[k], k * 16 * r + r, r);
						}
						if(k == 2) {
							numbers(wenben[k], k * 16 * r - 2 * r + r, r);
						}

						if(k == 3 || k == 4) {
							numbers(wenben[k], k * 16 * r - 8 * r + r, r);
						}
						if(k == 5) {
							numbers(wenben[k], k * 16 * r - 10 * r + r, r);
						}
						if(k == 6 || k == 7) {
							numbers(wenben[k], k * 16 * r - 16 * r + r, r);
						}

					}
					ball();
				}, 33)
			}

			function addball(x1, y1, num) { //小球x，y偏移量，数字
				var ballxy = arr[num]; //定位所需数字的数组，赋值给ballxy
				var R = parseInt(Math.random() * 256);
				var G = parseInt(Math.random() * 256);
				var B = parseInt(Math.random() * 256);

				for(var i = 0; i < ballxy.length; i++) {

					for(var j = 0; j < ballxy.length; j++) {

						if(ballxy[i][j] == 1) {
							var y = i * 2 * r + y1+ly;

							var x = j * 2 * r + x1+lx;
							var rr = parseInt(Math.random() * 256);
							var gg = parseInt(Math.random() * 256);
							var bb = parseInt(Math.random() * 256);
//							var vxx = Math.random() * 15;
//							var vyy = Math.random() * 20;
							var bjj = Math.random() * 5 + 5;
//							if(Math.random() > 0.5) {
//								vxx = -vxx;
//							}

							qiu.push([x, y, 0, 20, bjj, "RGB(" + rr + "," + gg + "," + bb + ")"]);
													
						}
					}
				}
			}

			function ball() {
				for(var i = 0; i < qiu.length; i++) {

					ctx.fillStyle = qiu[i][5];
					ctx.beginPath();
					ctx.arc(qiu[i][0], qiu[i][1], qiu[i][4], 0, 2 * Math.PI);

					ctx.fill();
					qiu[i][1] = qiu[i][3] + qiu[i][1];
					qiu[i][3] = qiu[i][3] + 0.5;
					qiu[i][0] = qiu[i][0] + qiu[i][2];
					qiu[i][4] = qiu[i][4] - 0.1;

					if(qiu[i][1] > canvas.height - qiu[i][4]) {
						qiu[i][3] = -0.5 * qiu[i][3];
						qiu[i][1] = 700 - qiu[i][4];
					}

					if(qiu[i][4] < 0) {
						qiu[i][4] = 0

						qiu.splice(0, i);
					}
				}

			}

			function numbers(num, x1, y1) { //数字，偏移量xy

				var shuzi = arr[num]; //定位所需数字的数组，赋值给shuzi
				var R = parseInt(Math.random() * 256);
				var G = parseInt(Math.random() * 256);
				var B = parseInt(Math.random() * 256);

				for(var i = 0; i < shuzi.length; i++) {

					for(var j = 0; j < shuzi[i].length; j++) {

						if(shuzi[i][j] == 1) {
							var y = i * 2 * r + y1+ly;

							var x = j * 2 * r + x1+lx;

							ctx.beginPath();
							ctx.arc(x, y, r, 0, 2 * Math.PI);
							ctx.closePath();
							if(num == 10) {
								ctx.fillStyle = "#000000"
							} else {
								ctx.fillStyle = "RGB(" + R + "," + G + "," + B + ")"
							}
							ctx.fill();

						}
					}
				}

			}
		</script>
	</body>

</html>